<template>
  <div class="testing">
    <div class="testingReport relative" @click="()=> {$router.push({name: 'report'})}">
      <img class="reportImage" src="@/assets/report.png" />
      <div>
        <div class="reportText">查看检测报告</div>
        <div class="reportContent">对农产品中的有害物质（如农药残留、重金属、兽药残留等）进行检测</div>
        <img class="arrowRight" src="@/assets/arrowRight.png" />
      </div>
    </div>
    <div class="testingReport pTip testingNone">
      <div>
        <div class="reportText">理化指标检测结果</div>
        <div class="reportContent pTop">理化指标柱形图</div>
        <div class="main" ref="echart_china"></div>
      </div>
    </div>
    <div class="testingReport pTip relative testingGreen">
      <div class="greenBack">土壤检测指标</div>
      <div class="flexBet">
        <div class="flexStart">
          <img class="company" src="@/assets/company.png" />
          <div>
            <div class="fontWeight">检测单位</div>
            <div>中国检验检疫科学研究院</div>
          </div>
        </div>
        <img class="qualified" src="@/assets/qualified.png" />
      </div>
      <img class="lineByLeft" src="@/assets/lineBy.png" />
      <img class="lineByRight" src="@/assets/lineBy.png" />
    </div>
    <div class="testingReport pTip relative testingGreen">
      <div class="greenBack">水质检测指标</div>
      <div class="flexBet">
        <div class="flexStart">
          <img class="company" src="@/assets/company.png" />
          <div>
            <div class="fontWeight">检测单位</div>
            <div>中国检验检疫科学研究院</div>
          </div>
        </div>
        <img class="qualified" src="@/assets/qualified.png" />
      </div>
      <img class="lineByLeft" src="@/assets/lineBy.png" />
      <img class="lineByRight" src="@/assets/lineBy.png" />
    </div>
    <div class="testingReport pTip relative testingGreen">
      <div class="greenBack">农残检测指标</div>
      <div class="flexBet">
        <div class="flexStart">
          <img class="company" src="@/assets/company.png" />
          <div>
            <div class="fontWeight">检测单位</div>
            <div>中国检验检疫科学研究院</div>
          </div>
        </div>
        <img class="qualified" src="@/assets/detection.png" />
      </div>
    </div>
    <!-- 水质检测报告 -->
    <!-- <template v-for="(item, index) in reportList">
      <div class="waterReport" v-if="reportList.length !== null" :key="index">
        <div class="water-l" @click="openReport(item.pdf)">
          <img src="../assets/waterReport.png" alt="" />
        </div>
        <div class="water-r">
          <div class="tit">
            <div class="name">{{ item.reportName }}</div>
            <div class="tag" @click="openReport(item.pdf)">查阅</div>
          </div>
          <div class="waterText">{{ item.inspectionInstitution }}</div>
          <div class="waterText">颁发日期：{{ item.samplingTime }}</div>
          <div class="waterText">报告编号：{{ item.reportId }}</div>
        </div>
      </div>
    </template>
    <template v-for="item in pesticideRepost">
      <div
        class="waterReport"
        v-if="pesticideRepost.length !== null"
        :key="item.id + 123"
      >
        <div class="water-l" @click="openReport(item.pdf)">
          <img src="../assets/waterReport.png" alt="" />
        </div>
        <div class="water-r">
          <div class="tit">
            <div class="name">{{ item.name }}</div>
            <div class="tag" @click="openReport(item.pdf)">查阅</div>
          </div>
          <div class="waterText">{{ item.company }}</div>
          <div class="waterText">颁发日期：{{ item.time }}</div>
          <div class="waterText">报告编号：{{ item.numbering }}</div>
        </div>
      </div>
    </template> -->
    <!-- <div
      class="none"
      v-if="reportList.length === 0 && pesticideRepost.length === 0"
    >
      <img src="./../assets/Group 179.png" alt="" />
      <div class="noneTest">暂无检测报告</div>
    </div> -->
  </div>
</template>

<script>
import {
  getpesticideResiduesByIdApi,
  getSamplingReportByIdApi
} from '@/api/tracing'
import block from './echart/block'
export default {
  name: 'ShuzhongtianH5Testing',

  data () {
    return {
      block,
      params: {
        soilids: '', // 土壤
        waterids: '', // 水质
        pesticideids: '' // 农残
      },
      soilReport: [],
      watherReport: [],
      pesticideRepost: [],
      reportList: [],
      reportShow: false
    }
  },

  mounted () {
    // if (this.$store.state.suyuan.soilids !== null && this.$store.state.suyuan.soilids !== '') {
    // this.params.soilids = this.$store.state.suyuan.soilids.split(',')
    // }
    // if (this.$store.state.suyuan.waterids !== null && this.$store.state.suyuan.waterids !== '') {
    // this.params.waterids = this.$store.state.suyuan.waterids.split(',')
    // }
    // if (this.$store.state.suyuan.pesticideids !== null && this.$store.state.suyuan.pesticideids !== '') {
    // this.params.pesticideids =
    // this.$store.state.suyuan.pesticideids.split(',')
    // }
    // this.getReportUrl()
    this.myEcharts()
  },

  methods: {
    myEcharts () {
      const myChart = this.$echarts.init(this.$refs.echart_china)
      const option = block
      myChart.setOption(option)
    },
    async getReportUrl () {
      // 土壤
      if (this.params.soilids !== '' && this.params.soilids !== null) {
        for (let i = 0; i < this.params.soilids.length; i++) {
          const res = await getSamplingReportByIdApi({
            id: this.params.soilids[i],
            reportType: 0
          })
          this.soilReport.push(res.data)
        }
      }
      // 水质
      if (this.params.waterids !== '' && this.params.waterids !== null) {
        for (let i = 0; i < this.params.waterids.length; i++) {
          const res1 = await getSamplingReportByIdApi({
            id: this.params.waterids[i],
            reportType: 1
          })
          this.watherReport.push(res1.data)
        }
      }
      // 农残
      if (
        this.params.pesticideids !== '' &&
        this.params.pesticideids !== null
      ) {
        for (let i = 0; i < this.params.pesticideids.length; i++) {
          console.log(this.params.pesticideids)
          const res2 = await getpesticideResiduesByIdApi(
            this.params.pesticideids[i]
          )
          this.pesticideRepost.push(res2.data)
          console.log(this.pesticideRepost)
        }
      }
      this.reportList.push(...this.soilReport, ...this.watherReport)
      if (this.reportList !== null && this.pesticideRepost !== null) {
        this.reportShow = false
      } else {
        this.reportShow = true
      }
      console.log(this.reportList, '水质土壤')
      console.log(this.pesticideRepost, '农残')
    },
    openReport (pdf) {
      window.open(pdf, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.testing {
  padding: 1.5vh 3.2vw 2vh;
}
.waterReport {
  width: 343px;
  height: 128px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px #e8f8ef;
  border-radius: 8px;
  display: flex;
  padding: 12px;

  .water-l {
    width: 80px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid #e8f8ef;
    margin-right: 12px;

    img {
      width: 80px;
      height: 100px;
    }
  }

  .water-r {
    height: 100px;

    .tit {
      display: flex;
      align-items: center;
      margin-bottom: 6px;

      .name {
        font-weight: 500;
        font-size: 16px;
        color: #0a241b;
        margin-right: 8px;
      }

      .tag {
        width: 32px;
        height: 20px;
        background: #19b560;
        border-radius: 4px;
        font-weight: 400;
        font-size: 12px;
        transform: scale(0.8);
        color: #ffffff;
        line-height: 20px;
        text-align: center;
      }
    }

    .waterText {
      font-weight: 400;
      font-size: 12px;
      color: #71807b;
      margin-bottom: 9px;
    }
  }
}
.none {
  text-align: center;
  margin-top: 30px;

  img {
    width: 213px;
    height: 228px;
  }
  .noneTest {
    margin-top: -100px;
    color: #71807b;
  }
}
.testingReport {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 1vh 3vw;
  border-radius: 1vw;
  .reportImage {
    height: 8vh;
    margin-right: 2vw;
  }
  .reportText {
    font-size: 4.2vw;
    font-weight: bold;
  }
  .reportContent {
    margin-top: 0.7vh;
    line-height: 2.2vh;
    width: 55vw;
    font-size: 12px;
    color: #999999
  }
  .arrowRight {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2.5vw;
    margin: auto;
    width: 5.5vw;
    height: 5vw;
  }
  .pTop {
    margin-top: 1.2vh !important
  }
}
.testingNone {
  display: block;
  .reportContent  {
    width: 100%;
  }
}
.testingGreen{
  display: block;
  padding: 0;
}
.relative {
  position: relative;
}
.pTip {
  margin-top: 1.4vh !important
}
.main {
  height: 200px;
}
.greenBack {
  background: #2FCA77;
  color: #fff;
  padding: 15px 0;
  text-align: center;
  border-top-left-radius: 1vw;
  border-top-right-radius: 1vw;
}
.flexBet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75vh 3vw;
}
.flexStart{
  display: flex;
  align-items: center;
  font-size: 12px;
  .company {
    height: 40px;
    margin-right: 7px;
  }
  .fontWeight{
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 3px;
  }
}
.qualified {
  height: 60px;
}
.lineByLeft {
  height: 43px;
  position: absolute;
  bottom: -28px;
  left: 2.5vw;
  z-index: 10;
}
.lineByRight{
  height: 43px;
  position: absolute;
  bottom: -28px;
  right: 2.5vw;
  z-index: 10;
}
</style>
